<template>
	<div class="community-detail" v-if="isDelete">
		<div class="community-detail-container">
			
		
		<div class="community-detail-photo">
			<el-avatar :size="50" :src="data.communityDetail.avatar?data.communityDetail.avatar:require('../../assets/image/icon-defalut.png')" @error="(e)=>{e.target.src = require('../../assets/image/icon-defalut.png')}" />
			<div class="line-list-icon-title">
				<h2>{{data.communityDetail.nickName}}</h2>
				<p>{{data.communityDetail.create_time}} </p>
			</div>
		</div>
		<div class="common-interpolate-bottom-type" v-if="data.communityDetail.job_type">
			<span>{{data.communityDetail.job_type_name}}</span>
			<span><el-icon><LocationFilled /></el-icon>{{data.communityDetail.job_address_name}}</span>
		</div>
		<el-card>
		  <!-- <img
			:src="data.communityDetail.image_path"
			v-if="data.communityDetail.image_path"
			@error="(e)=>{data.communityDetail.image_path = null}"
			class="image"
		  /> -->
		  <div class="el-card-info">
		    <div class="el-card-info-title">
			  <strong>{{data.communityDetail.title}}</strong>
		    </div>
			
			<div class="bottom" @click="articleClick($event)">
			  <p :class="data.communityDetail.id >= 37 && data.communityDetail.id <= 53 || data.communityDetail.id >= 95 && data.communityDetail.id <= 136?'':'line-numbers'" v-html="data.communityDetail.content"></p>
			</div>
			<div class="el-card-info-operation">
			   <span class="hoverActive" @click="priviewClick"><el-icon><platform /></el-icon> 预览</span>
			   <span class="hoverActive" @click="codeClick"><el-icon><download /></el-icon> 源码</span>
			   <span class="hoverActive" @click="shareClick"><el-icon><Share /></el-icon> 分享</span>
			   <span class="hoverActive" @click="commitClick(0)"><el-icon><chat-dot-square /></el-icon> 评论</span>
			   <span class="hoverActive" @click="collectionClick"><el-icon><star /></el-icon>{{data.communityDetail.star_status?' 已收藏':' 收藏'}}</span>
			   <span class="hoverActive"><img style="width: 18px;margin-right: 5px;" src="../../assets/image/icon_look.png" alt="">浏览量({{data.communityDetail.access_count}})</span>
			</div>
		  </div>
		</el-card>
		<!-- 留言 -->
		<div class="commonts_title">
			<h3>评论({{data.commentsTotal}})</h3>
		</div>
		<div class="line-list" v-for="item in data.commentsData">
			<div class="line-list-icon">
				<div class="line-list-icon-left">
					<el-avatar :size="40" :src="item.avatar?item.avatar:require('../../assets/image/icon-defalut.png')"  @error="(e)=>{e.target.src = require('../../assets/image/icon-defalut.png')}" />
					<div class="line-list-icon-title">
						<h2>{{item.nickName}}</h2>
						<p>{{item.create_time}} <span @click="commitClick(true,item.id,item.nickName)">回复</span></p>
					</div>
				</div>
				<span v-if="!(store.state.userInfoX&&store.state.userInfoX.token)?false:item.nickName === store.state.userInfoX&&store.state.userInfoX.nickName || store.state.userInfoX&&store.state.userInfoX.user_type > 1" class="hoverActive" @click="deleteClick(item.id,1)">删除</span>
			</div>
			<div class="line-list-info">
				{{item.content}}
			</div>
			<!-- 二级评论 -->
			<div class="secondary_comments" v-if="item.children.length > 0">
				<div class="secondary_comments_list" v-for="val in item.children">
					<div class="line-list-icon">
						<div class="line-list-icon-left">
							<el-avatar :size="30" :src="val.avatar?val.avatar:require('../../assets/image/icon-defalut.png')"  @error="(e)=>{e.target.src = require('../../assets/image/icon-defalut.png')}" />
							<div class="line-list-icon-title">
								<h2>{{val.nickName}}<strong v-if="val.be_nickName">@</strong>{{val.be_nickName?`${val.be_nickName}`:''}}</h2>
								<p>{{val.create_time}} <span @click="commitClick(true,item.id,val.nickName,val.user_id)">回复</span></p>
							</div>
						</div>
						<span v-if="!(store.state.userInfoX&&store.state.userInfoX.token)?false:val.nickName === store.state.userInfoX&&store.state.userInfoX.nickName || store.state.userInfoX&&store.state.userInfoX.user_type > 1" class="hoverActive" @click="deleteClick(val.id,(!val.be_nickName?2:3))">删除</span>
					</div>
					<div class="line-list-info">
						{{val.content}}
					</div>
				</div>
			</div>
		</div>
		<div v-if="data.commentsData.length === 0" class="no-data">
			<img src="../../assets/image/noData.png" >
			<p>还没有人评论，快去抢个沙发吧！</p>
		</div>
		</div>
	</div>
	<div v-else class="no-data">
		<img src="../../assets/image/noData.png" >
		<p>此文章已被作者删除</p>
	</div>
	<el-image
	      style="width: 0;height: 0;"
	      :src="data.image_url"
	      :preview-src-list="data.image_list"
	      fit="cover"
		  :initial-index="data.initialIndex"
		  id="imageId"
	    />
</template>

<script lang="ts" setup>
	import Prism from "prismjs"//导入代码高亮插件的core（里面提供了其他官方插件及代码高亮样式主题，你只需要引入即可）
	import "prismjs/plugins/line-numbers/prism-line-numbers.min.js"//行号插件
	import "prismjs/themes/prism-tomorrow.min.css"//引入代码高亮主题（这个去node_modules的安装prismjs中找到想使用的主题即可
	import "prismjs/plugins/line-numbers/prism-line-numbers.min.css"//行号插件的样式
	import 'prismjs/components/prism-bash'; // 针对 bash
	import 'prismjs/components/prism-javascript'; // 针对 javascript
	import {Platform,Download,ChatDotSquare,Star,Share,LocationFilled} from '@element-plus/icons-vue'
	import { ref,reactive,onMounted,nextTick} from 'vue'
	import { ElMessage, ElMessageBox } from 'element-plus'
	import {HttpArticleDetails,HttpGetjobType,HttpCollection,HttpComments,HttpPostComments,HttpPostSecondaryComments,HttpDeleteComments} from '../../public/http'
	import {useRoute} from 'vue-router'
	import { inject } from "vue";
	import bus from '../../public/bus'
	import {selectCity} from '../../public/selectCity'
	const store = inject('store')
	const router = useRoute()
	
	const article_id = router.query.id
	let isDelete = ref(true)
	let data = reactive({
		communityDetail:{} as any,
		commentsData:[] as any,
		commentsTotal:0,
		image_url:"",
		image_list:[],
		initialIndex:0
	})
	// 文章点击,图片放大
	const articleClick = async (event) => {
		console.log(event)
		if(event.target.nodeName === "IMG"){
			let currentSrc = event.target.currentSrc
			data.image_url = currentSrc
			data.initialIndex = data.image_list.indexOf(data.image_url)
			await nextTick()
			setTimeout(()=>{
				if(document.all) {
				   document.getElementById("imageId").click();
				}else {
			        let e = document.createEvent("MouseEvents");
			        e.initEvent("click", true, true);
			        document.getElementById("imageId").dispatchEvent(e);
				}
			},500)
		}
	}
	
	// 文章详情
	const articleDetailMain = async()=>{
		HttpArticleDetails(article_id).then(async(res:any)=>{
			if(res.code === 200){
				data.communityDetail = res.data.acticleDetail[0]
				getArticleImages(data.communityDetail.content)
				await nextTick()
				Prism.highlightAll()
			}else{
				isDelete.value = false
				ElMessage({
				  message: res.message,
				  type: 'warning',
				})
			}
		})
	}
	// 获取文章图片列表
	const getArticleImages = (content)=>{
		content.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function (match, capture) {
			data.image_list.push(capture)
		});
	}
	// 评论详情
	const commentsMain = ()=>{
		HttpComments(article_id).then((res:any)=>{
			if(res.code === 200){
				data.commentsData = res.data.commentsData
				data.commentsTotal = res.data.total
			}
		})
	}
	// 发表二级评论
	const sendSecondayComments = (content,id)=>{
		HttpPostSecondaryComments(id,{
			content:content,
			article_id:article_id,
			be_user_id:"",
		}).then((res:any)=>{
			if(res.code === 200){
				ElMessage({
				  message: `评论成功`,
				  type: 'success',
				})
				commentsMain()
				bus.emit("reviseSuccess")
				return;
			}
			ElMessage({
			  message: `评论失败`,
			  type: 'warning',
			})
		})
	}
	// 发表三级评论
	const sendThreeComments = (content,id,user_id)=>{
		
		HttpPostSecondaryComments(id,{
			content:content,
			article_id:article_id,
			be_user_id:user_id,
		}).then((res:any)=>{
			if(res.code === 200){
				ElMessage({
				  message: `评论成功`,
				  type: 'success',
				})
				commentsMain()
				bus.emit("reviseSuccess")
				return;
			}
			ElMessage({
			  message: `评论失败`,
			  type: 'warning',
			})
		})
	}
	// 发表评论接口
	const sendComments = (content)=>{
		HttpPostComments(article_id,{
			content:content
		}).then((res:any)=>{
			if(res.code === 200){
				ElMessage({
				  message: `评论成功`,
				  type: 'success',
				})
				commentsMain()
				bus.emit("reviseSuccess")
				return;
			}
			ElMessage({
			  message: `评论失败`,
			  type: 'warning',
			})
		})
	}
	// 评论
	// id 评论id,user_id 三级评论时用户id
	const commitClick = (type,id,name,user_id)=>{
		ElMessageBox.prompt('请输入您的评论', '评论'+`@${name?name:data.communityDetail.nickName}`, {
		    confirmButtonText: '确定',
		    cancelButtonText: '取消',
		    inputErrorMessage: '请输入您的评论',
		  })
		.then(({ value }) => {
	      if(type){
			  (!user_id)?sendSecondayComments(value,id):sendThreeComments(value,id,user_id)
			  return
		  }
		  sendComments(value)
		  
		})
		.catch(() => {
		 
		})
	}
	// 预览
	const priviewClick = ()=>{
		const {priview_address,article_type} = data.communityDetail
		if(article_type === 4){
			window.open(priview_address,'_self')
			return
		}
		if(priview_address && priview_address.indexOf('http://') > -1||priview_address.indexOf('https://') > -1){
			window.open(priview_address)
			return
		}
		ElMessage({
		  message: `暂无预览地址`,
		  type: 'warning',
		})
	}
	// 源码地址
	const codeClick = ()=>{
		const {code_address} = data.communityDetail
		if(code_address){
		  const oInput = document.createElement('input')
		  oInput.value = code_address
		  document.body.appendChild(oInput)
		  oInput.select()
		  document.execCommand('Copy')
		  oInput.style.display = 'none'
		  document.body.removeChild(oInput)
			ElMessage({
			  message: `复制成功`,
			  type: 'success',
			})
			return
		}
		ElMessage({
		  message: `暂无源码地址`,
		  type: 'warning',
		})
	}
	// 分享
	const shareClick = ()=>{
		const oInput = document.createElement('input')
		oInput.value = window.location.href+'&'+data.communityDetail.title
		document.body.appendChild(oInput)
		oInput.select()
		document.execCommand('Copy')
		oInput.style.display = 'none'
		document.body.removeChild(oInput)
		ElMessage({
		  message: `复制成功,快去分享吧`,
		  type: 'success',
		})
	}
	// 收藏
	const collectionClick = ()=>{
		let {star_status} = data.communityDetail
		if(star_status){
			star_status = 0
		}else{
			star_status = 1
		}
		HttpCollection(article_id,{
			status:star_status
		}).then((res:any)=>{
			if(res.code === 200){
				ElMessage({
				  message: `${star_status?'收藏成功':'已取消收藏'}`,
				  type: 'success',
				})
				data.communityDetail.star_status = star_status
				bus.emit("reviseSuccess")
				return
			}
			ElMessage({
			  message: `操作失败`,
			  type: 'warning',
			})
		})
	}
	// 删除评论
	const deleteClick = (id,type)=>{
		ElMessageBox.confirm(
			'你确定要删除此评论嘛，一旦删除无法撤销',
			'警告',
			{
			  confirmButtonText: '确定',
			  cancelButtonText: '取消',
			  type: 'warning',
			}
		  ).then(() => {
			 HttpDeleteComments(id,{
				 delete_type:type
			 }).then((res:any)=>{
			 	if(res.code === 200){
			 		ElMessage({
			 		  message: `删除成功`,
			 		  type: 'success',
			 		})
					bus.emit("reviseSuccess")
			 		commentsMain()
			 		return
			 	}
			 	ElMessage({
			 	  message: `删除失败`,
			 	  type: 'success',
			 	})
			 })
		})
		
		
	}
	
	onMounted(()=>{
		articleDetailMain()
		commentsMain()
	})
	
</script>

<style lang="scss" >
	.community-detail{
		
		width: 100%;
		height: calc(100%);
		overflow: auto;
		background: #efedee;
		padding: 10px 10px 0 10px;
		box-sizing: border-box;
		
		.community-detail-container{
			width: 60%;
			height: 100%;
			overflow: auto;
			margin: 0 auto;
			min-width: 500px;
		}
		.no-data{
			height: 50%;
		}
		code{
			padding: 0 10px;
			box-sizing: border-box;
			background: #2d2d2d;
			color: white;
			display: block;
			width: 90%;
		}
		.community-detail-photo{
			width: 100%;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-direction: row;
			border-radius: 0;
			.el-avatar--circle{
				border-radius: 5px;
			}
			.line-list-icon-title{
				 margin-left: 5px;
				 display: flex;
				 align-items: flex-start;
				 flex-direction: column;
				 width: calc(100% - 80px);
				
				h2{
					width: 100%;
					font-size: 15px;
					margin: 0;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					margin-bottom: 10px;
					color: var(--main-font-color);
					
				}
			  p{
				font-size: 12px;
				margin: 0;
				color: #9094a0;
				
			  }
			}
		}
		.common-interpolate-bottom-type{
			margin: 5px 0;
			display: flex;
			span{
				font-size: 12px;
				background-color: rgba(29,101,255,0.1);
				padding: 3px;
				border-radius: 3px;
				box-sizing: border-box;
				margin-right: 5px;
				display: flex;
				align-items: center;
				overflow:hidden;
				white-space:nowrap;
				text-overflow:ellipsis;
				
				&:nth-of-type(1){
					max-width: 60%;
				}
				&:nth-of-type(2){
					max-width: 40%;
				}
			}
		}
		.el-card{
			width: 100%;
			height: auto;
			box-shadow: none;
			border: 0;
			margin: 0;
			border-radius: 0;
			background-color: transparent;
			position: relative;
			img{
				max-width: 100%;
			}
			&:after{
				content: "";
				position:absolute;
				bottom: 0;
				right: 0;
				width: 100%;
				height: 1px;
				background-image: linear-gradient(to right,rgba(145,149,160,0.1),rgba(145,149,160,0.2),rgba(145,149,160,0.1));
			}
			.el-card__body{
				width: 100%;
				height: 100%;
				padding: 0;
				border-radius: 0;
				font-size: 0;
				.image{
					width: 100%;
					height: auto;
					border-radius: 0;
				}
				.el-card-info{
					padding: 10px 0;
					box-sizing: border-box;
					span{
						opacity: 1;
					}
					.el-card-info-title{
						display: flex;
						justify-content: space-between;
						color: var(--main-font-color);
						letter-spacing: 2px;
						strong{
							font-size: 16px;
							font-weight: 500;
							padding-bottom: 20px;
							position: relative;
							&:after{
								content: "";
								position:absolute;
								bottom: 0;
								right: 0;
								width: 100%;
								height: 1px;
								background-image: linear-gradient(to right,rgba(145,149,160,0.1),rgba(145,149,160,0.2),rgba(145,149,160,0.1));
							}
						}
						span{
							font-size: 12px;
						}
					}
					.el-card-info-operation{
						margin-top: 20px;
						display: flex;
						justify-content: flex-start;
						span{
							i{
								margin-right: 5px;
							}
							font-size: 15px;
							margin-right: 30px;
							cursor: pointer;
							color: #9195a1;
							display: flex;
							align-items: center;
							&:hover{
								color: var(--main-font-color);
							}
						}
					}
					
					p{
						letter-spacing: 2px;	
						line-height: 30px;
						font-size: 15px;
						color: var(--main-font-color);
					}
				}
			}
		}
		.commonts_title{
			h3{
				color: #9195a1;
				font-size: 16px;
				letter-spacing: 1px;
				margin-bottom: 30px;
				font-weight: 500;
			}
			
		}
		.line-list{
			width:100%;
			border-radius: 5px;
			padding:20px;
			box-sizing: border-box;
			box-shadow: none;
			clear: both;
			color: white;
			position: relative;
			margin-bottom: 20px;
			border: 0;
			background: white;
			.el-avatar--circle{
				border-radius: 20%;
			}
			&:after{
				content: "";
				position:absolute;
				bottom: 0;
				right: 0;
				width: calc(100% - 20px);
				height: 1px;
				background-image: linear-gradient(to right,rgba(145,149,160,0.1),rgba(145,149,160,0.2),rgba(145,149,160,0.1));
			}
			&:last-child{
				margin-bottom: 400px;
			}
			 &-icon{
				 width: 100%;
				 display: flex;
				 justify-content: space-between;
				 align-items: center;
				 flex-direction: row;
				 &-left{
					 display: flex;
					 justify-content: flex-start;
					 align-items: center;
					 flex-direction: row;
					 width: calc(100% - 40px);
				 }
				 .hoverActive{
					 width: 40px;
					 height: 25px;
					 color: rgb(59, 115, 240);
					 text-align: center;
					 line-height: 25px;
					 border-radius: 20px;
					 float: right;
					 font-size: 12px;
				 }
				 
				 &-title{
					 margin-left: 5px;
					 display: flex;
					 align-items: flex-start;
					 flex-direction: column;
					 padding: 10px 0 10px 0;
					 letter-spacing: 1px;
					 width: calc(100% - 200px);
					h2{
						width: 100%;
						font-size: 13px;
						margin: 0;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						margin-bottom: 5px;
						color: var(--main-font-color);
					}
				   p{
						font-size: 12px;
						margin: 0;
						color: #9094a0;
						span{
							color: rgb(59, 115, 240);
							cursor: pointer;
							&:hover{
								opacity: 0.6;
							}
						}
				   }
				 }
			 }
			 
			 &-info{
				 width: 100%;
				 padding-left: 40px;
				 box-sizing: border-box;
				 font-size: 13px;
				 letter-spacing: 1px;
				 color: var(--main-font-color);
				 line-height: 20px;
			 }
			 .line-list-title{
				 background-color: #eee;
				 padding: 5px;
				 box-sizing: border-box;
				 cursor: pointer;
				 letter-spacing: 1px;
			 }
			 // 二级评论
			 .secondary_comments{
				 width: calc(100% - 40px);
				 background: #eee!important;
				 border-radius: 5px;
				 padding: 10px 0;
				 margin-left: 40px;
				 .secondary_comments_list{
					 @extend  .line-list;
					 margin-bottom: 0!important;
					 background-color: transparent;
					 .line-list-icon-title{
						 font-size: 12px;
						 strong{
							 color: rgb(59, 115, 240);
							 font-size: 16px;
						 }
					 }
					 .el-avatar--circle{
						 border-radius: 60%;
					 }
				 }
			 }
		}
		.line-numbers code{
			background-color: #2d2d2d;
		}
	}
</style>
